<template>
  <div
    class="add-code"
    v-loading="loading"
    element-loading-text="拼命加载中..."
    element-loading-spinner="el-icon-loading"
  >
    <div class="head">
      <div class="title">
        {{ !$route.query.id ? $route.meta.title : "编辑渠道活码" }}
      </div>
      <el-button size="small" class="btn-blue" @click="handleBack"> 返回 </el-button>
    </div>
    <div class="steps">
      <span :class="active === 1 ? 'circle active' : 'circle active el-icon-check'">{{
        active === 1 ? "1" : ""
      }}</span>
      <span class="text">基础设置</span>
      <span :class="active === 1 ? 'line' : 'line active'"></span>
      <span
        :class="
          active === 1
            ? 'circle'
            : active === 2
            ? 'circle active'
            : 'circle active el-icon-check'
        "
        >{{ active > 2 ? "" : 2 }}</span
      >
      <span class="text">引流成员设置</span>
      <span :class="active < 3 ? 'line' : 'line active'"></span>
      <span :class="active < 3 ? 'circle' : 'circle active'">3</span>
      <span class="text">欢迎语设置</span>
    </div>
    <div class="main">
      <!-- 步骤一结构 -->
      <div class="form" v-show="active === 1">
        <el-form label-position="left" label-width="180px" :model="form">
          <el-form-item label="选择分组" required>
            <SelectTree
              v-if="!loading"
              :options="groupOptions"
              :accordion="false"
              :value="form.groupId"
              @getValue="getSelectTreeValue"
            />
          </el-form-item>
          <el-form-item label="活码名称" required>
            <el-input
              style="width: 600px"
              type="textarea"
              placeholder="限30字符"
              v-model="form.liveCodeName"
              maxlength="30"
              size="small"
              :disabled="Boolean($route.query.id)"
              resize="none"
              :autosize="{ minRows: 1, maxRows: 1 }"
              show-word-limit
            >
            </el-input>
            <span v-if="!Boolean($route.query.id)" class="last-text"
              >（创建成功后不可修改）</span
            >
          </el-form-item>
          <el-form-item label="自动添加好友">
            <el-switch active-color="#6881EC" v-model="form.switchValue"> </el-switch>
            <span class="last-text">{{
              form.switchValue
                ? "（开启时，客户扫码添加成员自动成员好友，无需确认）"
                : "（关闭时，客户扫码添加成员需成员确认）"
            }}</span>
          </el-form-item>
          <el-form-item>
            <template slot="label">
              客户标签
              <el-tooltip
                class="item"
                effect="dark"
                content="客户通过扫码添加企业成员后，将被自动打上选中的标签"
                placement="top-start"
              >
                <i class="iconfont icon-question-circle"> </i>
              </el-tooltip>
            </template>
            <div class="tabs-wrap" v-loading="label.loading">
              <el-form label-width="270px" v-show="!label.loading">
                <template v-for="(item, index) in customLabelList">
                  <el-form-item
                    style="margin-bottom: 15px"
                    :label="item.name"
                    :key="index"
                  >
                    <el-button
                      style="margin: 0 5px"
                      size="small"
                      :ref="citem.id"
                      class="btn-gray"
                      @click="handlePickLabel(citem.id)"
                      v-for="(citem, index) in item.group"
                      :key="index"
                    >
                      {{ citem.name }}
                    </el-button>
                    <el-button
                      size="small"
                      style="margin: 0 5px"
                      class="btn-white"
                      icon="el-icon-plus"
                      @click="handleAddLabel(item)"
                      >新建标签</el-button
                    >
                  </el-form-item>
                </template>
                <el-form-item>
                  <el-button
                    style="margin: 20px 0 0 5px"
                    size="small"
                    class="btn-white"
                    icon="el-icon-plus"
                    @click="handleAddLabelGroup"
                    >新建标签组</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button size="small" class="btn-blue" @click="handleNext"
              >下一步</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 新建标签与标签组 -->
        <el-dialog
          width="600px"
          :title="label.title"
          :visible.sync="label.visible"
          :before-close="dialogBeforeClose"
          :close-on-click-modal="false"
        >
          <el-form
            class="forms"
            style="margin-top: 20px"
            v-show="label.title === '新增标签'"
            :model="label"
            :rules="labelRules"
            ref="labelForm1"
          >
            <el-form-item label="选择分组" label-width="100px">
              <el-select
                style="width: 100%"
                v-model="label.labelGroupName"
                disabled
                placeholder="请选择"
                size="small"
              >
              </el-select>
            </el-form-item>
            <el-form-item
              style="margin-bottom: 10px"
              label="标签名称"
              label-width="100px"
              prop="labelValue"
            >
              <el-input
                placeholder="请输入标签（不得超过15个字符）"
                v-model="label.labelValue"
                size="small"
              ></el-input>
            </el-form-item>
            <el-form-item label="" label-width="100px">
              <span style="font-size: 12px; color: #999"
                >每个标签名称最多15个字，同时新建多个标签时，请用“空格” 隔开。</span
              >
            </el-form-item>
          </el-form>
          <el-form
            style="margin-top: 20px"
            v-show="label.title === '新增标签组'"
            :model="label"
            :rules="labelRules"
            ref="labelForm2"
          >
            <el-form-item label="分组名称" label-width="100px" prop="labelGroupName">
              <el-input
                placeholder="请输入分组名（不得超过15个字符）"
                v-model="label.labelGroupName"
                maxlength="15"
                size="small"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              style="margin-bottom: 10px"
              label="标签名称"
              label-width="100px"
              prop="labelValue"
            >
              <el-input
                placeholder="请输入标签（不得超过15个字符）"
                v-model="label.labelValue"
                size="small"
              ></el-input>
            </el-form-item>
            <el-form-item label="" label-width="100px">
              <span style="font-size: 12px; color: #999"
                >标签名称最多15个字符，同时新建多个标签时，请用“空格”隔开。</span
              >
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button
              size="small"
              class="btn-white"
              @click="
                () => {
                  label.visible = false;
                  label.labelGroupName = '';
                  $refs.labelForm1.resetFields();
                  $refs.labelForm2.resetFields();
                }
              "
              >取 消</el-button
            >
            <el-button size="small" class="btn-blue" @click="handleSubmitLabel"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
      <!-- 步骤二结构 -->
      <div class="form" v-show="active === 2">
        <!-- <span class="info">
          扫码添加成员规则：在周期和特殊时期共存情况下，扫码优先添加特殊时期的成员。</span
        > -->
        <el-form label-position="left" label-width="180px" :model="form">
          <el-form-item label="类型">
            <el-radio v-model="radio" :disabled="Boolean($route.query.id)" :label="1"
              >单人</el-radio
            >
            <el-radio v-model="radio" :disabled="Boolean($route.query.id)" :label="2"
              >多人</el-radio
            >
            <span v-if="!Boolean($route.query.id) && radio == 1" class="last-text"
              >（当客户通过活码扫码添加好友时，所加为好友的成员为设置的成员,创建成功后不可修改）</span
            >
            <span v-if="!Boolean($route.query.id) && radio == 2" class="last-text"
              >（当客户通过活码扫码添加好友时，所加为好友的成员为将从设置的成员中随机分配,创建成功后不可修改）</span
            >
          </el-form-item>
          <el-form-item style="margin-bottom: 10px" label="企业成员" required>
            <el-button size="small" class="btn-blue" @click="handleEditPick">
              {{ pickStaffList.length !== 0 ? "编辑" : "添加" }}
            </el-button>
            <el-tooltip
              v-if="Boolean($route.query.id) && radio === 1"
              class="item"
              effect="dark"
              content="成员更改后，原活码图片上成员头像不会随之更改，无功能影响。"
              placement="top-start"
            >
              <i class="iconfont icon-question-circle" style="margin-left: 10px"> </i>
            </el-tooltip>
          </el-form-item>
          <el-form-item
            style="margin-bottom: 10px"
            label="已选成员列表"
            v-show="pickStaffList.length !== 0"
          >
            <div class="overhidden">
              <span v-for="(item, index) in pickStaffList" :key="index"
                >{{ item.name }}&nbsp;</span
              >
            </div>
          </el-form-item>
          <el-form-item
            style="margin-bottom: 10px"
            label="已选部门列表"
            v-show="radio === 2 && pickDepartment.length !== 0"
          >
            <div class="overhidden">
              <span v-for="(item, index) in pickDepartment" :key="index"
                >{{ item.name }}&nbsp;</span
              >
            </div>
          </el-form-item>
          <el-form-item style="margin-bottom: 10px" label="员工添加上限">
            <el-switch
              @change="changeAddswitch"
              v-model="AddSwitch"
              active-color="#6881EC"
            >
            </el-switch>
            <span class="last-text"
              >（因受官方限制，无法对动态部门的员工设置添加好友上限，只可针对指定活码成员进行设置）</span
            >
          </el-form-item>
          <el-form-item v-if="AddSwitch">
            <el-table
              :data="pickStaffList"
              style="width: 500px"
              :header-row-style="{ height: '35px' }"
              class="table"
              :row-style="{ height: '35px' }"
              :cell-style="{ height: '35px' }"
              :header-cell-style="{
                color: '#333',
                fontSize: '14px',
                backgroundColor: '#F6F7FB',
                fontWeight: 'normal',
                height: '35px',
              }"
            >
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column label="上限">
                <template slot-scope="scope">
                  <el-input
                    type="number"
                    min="1"
                    max="500"
                    size="small"
                    v-model="numList[scope.$index].num"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="备用员工" v-show="AddSwitch" required>
            <el-select
              v-model="spare_staff_id"
              size="small"
              style="width: 300px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in staff.soloData"
                :key="item.user_id"
                :label="item.name"
                :value="item.user_id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" class="btn-white" @click="handlePrev"
              >上一步</el-button
            >
            <el-button size="small" class="btn-blue" @click="handleNext"
              >下一步</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 添加多人企业成员 -->
        <el-dialog
          v-loading="staff.loading"
          title="添加企业成员"
          :visible.sync="staff.visibleMany"
          :close-on-click-modal="false"
          width="500px"
        >
          <el-form style="margin-top: 20px" label-position="left" label-width="120px">
            <el-form-item label="选择企业成员">
              <div style="display: flex; height: 32px; align-item: center">
                <el-button size="small" class="btn-white" @click="pickManyStaff"
                  >选择企业成员</el-button
                >
                <el-tooltip
                  v-show="staffCheckList.length !== 0"
                  class="item"
                  effect="dark"
                  :content="contentName"
                  placement="top-start"
                >
                  <span
                    style="
                      display: inline-block;
                      white-space: nowrap;
                      overflow: hidden;
                      width: 200px;
                      line-height: 32px;
                      text-overflow: ellipsis;
                      margin-left: 20px;
                    "
                  >
                    <span v-for="(item, index) in staffCheckList" :key="index"
                      >{{ item.name }}&nbsp;</span
                    >
                  </span>
                </el-tooltip>
              </div>
            </el-form-item>
            <el-form-item label="选择部门">
              <el-select
                size="small"
                v-model="departmentValue"
                multiple
                placeholder="请选择部门"
              >
                <el-option
                  v-for="item in departmentList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button
              size="small"
              class="btn-white"
              @click="
                () => {
                  staff.visibleMany = false;
                  onePickList = [];
                  staffCheckList = [];
                  departmentValue = [];
                }
              "
              >取 消</el-button
            >
            <el-button size="small" class="btn-blue" @click="addManyConfirm"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <el-dialog
          width="700px"
          title="选择企业成员"
          :before-close="pickManyBeforeClose"
          :close-on-click-modal="false"
          :visible.sync="staff.manyIn"
        >
          <div class="dialog-content">
            <div class="left-content">
              <el-input
                style="margin-right: 10px"
                placeholder="搜索"
                v-model="filterText"
                class="input-with-select"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
              <el-tree
                style="margin-top: 10px"
                :data="staff.manyData"
                :props="staff.props"
                ref="tree"
                show-checkbox
                :filter-node-method="filterNode"
                :default-expand-all="true"
                @check="handleCheckStaff"
                node-key="user_id"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{{ data.name }}</span>
                </span>
              </el-tree>
            </div>
            <span class="line"></span>
            <div class="right-content">
              <div class="tle">已选择{{ staffCheckList.length }}名成员</div>
              <div class="check" v-for="(item, index) in staffCheckList" :key="index">
                <span>{{ item.name }}</span>
                <i
                  class="el-icon-circle-close"
                  @click="
                    () => {
                      $refs.tree.setChecked(item.user_id, false);
                      staffCheckList.splice(index, 1);
                    }
                  "
                ></i>
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" class="btn-white" @click="handlePickManyCancel"
              >取 消</el-button
            >
            <el-button size="small" class="btn-blue" @click="handlePickManyConfirm"
              >确 定</el-button
            >
          </span>
        </el-dialog>

        <!-- 添加单人企业成员 -->
        <el-dialog
          v-loading="staff.loading"
          title="选择企业成员"
          :visible.sync="staff.visibleSolo"
          :close-on-click-modal="false"
          :before-close="
            () => {
              staff.visibleSolo = false;
              if (pickStaffList.length !== 0) {
                pickStaff = pickStaffList[0];
              } else {
                pickStaff = '';
              }
            }
          "
          width="500px"
        >
          <el-form style="margin-top: 20px" label-position="left">
            <el-form-item label="选择企业成员" label-width="120px" required>
              <el-select value-key="user_id" v-model="pickStaff" placeholder="请选择成员">
                <el-option
                  v-for="item in staff.soloData"
                  :key="item.user_id"
                  :label="item.name"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button
              size="small"
              class="btn-white"
              @click="
                () => {
                  staff.visibleSolo = false;
                  if (pickStaffList.length !== 0) {
                    pickStaff = pickStaffList[0];
                  } else {
                    pickStaff = '';
                  }
                }
              "
              >取 消</el-button
            >
            <el-button
              size="small"
              class="btn-blue"
              @click="
                () => {
                  if (!pickStaff) {
                    $message.warning('请选择企业成员！');
                  } else {
                    pickStaffList = [];
                    pickStaffList.push(pickStaff);
                    staff.visibleSolo = false;
                  }
                }
              "
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>

      <!-- 步骤三结构 -->
      <div class="form" v-show="active === 3">
        <div class="switch">
          <span class="label">扫码推送欢迎语</span>
          <el-switch v-model="form.scanCodeSwitch" active-color="#6881EC"> </el-switch>
          <span class="last-text"
            >（关闭后，将不再推送此活码设置的欢迎语，仅推送【系统欢迎语】,若已在企微后台为成员配置欢迎语，则此欢迎语无效，仅推送【系统欢迎语】）</span
          >
        </div>
        <div class="phone-main" v-show="form.scanCodeSwitch">
          <div class="phone">
            <div class="top-head"></div>
            <div class="content">
              <div class="content-main">
                <div class="message" v-show="textLength">
                  <img
                    class="avatar-left"
                    src="../../assets/images/avatar.png"
                    width="32px"
                  />
                  <div class="input-value" ref="input-text"></div>
                </div>
                <div class="message">
                  <img
                    v-show="image.submit || link.submit || mini.submit || href.submit"
                    class="avatar-left"
                    src="../../assets/images/avatar.png"
                    width="32px"
                    alt=""
                  />
                  <div class="imgBox" v-if="contType === 2 && image.submit">
                    <img class="pic" :src="image.data.content" alt="" />
                  </div>
                  <div class="link" v-else-if="contType === 3 && link.submit">
                    <p class="link-title">{{ link.data.title }}</p>
                    <div>
                      <span class="link-desc">{{ link.data.summary }}</span>
                      <img class="link-cover" :src="link.data.cover" alt="" />
                    </div>
                  </div>
                  <div class="mini" v-else-if="contType === 6 && mini.submit">
                    <p class="mini-title">{{ mini.data.title }}</p>
                    <div>
                      <img class="mini-cover" :src="mini.data.cover" alt="" />
                    </div>
                  </div>
                  <div class="link" v-else-if="contType === 8 && href.submit">
                    <p class="link-title">{{ href.data.title }}</p>
                    <div>
                      <span class="link-desc">{{ href.data.summary }}</span>
                      <img class="link-cover" :src="href.data.cover" alt="" />
                    </div>
                  </div>
                  <!-- <div class="text" v-else-if="contType === 1 && texts.submit">
                    <p class="text-title">{{ texts.data.content }}</p>
                  </div> -->
                </div>
              </div>
            </div>
            <div class="phone-foot"></div>
          </div>
          <div class="main-right">
            <div class="operate">
              <div
                contenteditable="true"
                id="textarea"
                class="custom-textarea"
                ref="custom-textarea"
                @input="changeText"
              ></div>
              <!-- <w-textarea v-model="text"  @add='addTag' :tools='tool'
               /> -->
              <span>{{ textLength }}/1000</span>
              <div class="btn">
                <span>点击插入：</span>
                <el-button size="small" class="btn-orange" @click="handleAddBtn"
                  >客户名称</el-button
                >
              </div>
              <div
                class="btns"
                v-show="
                  !image.submit &&
                  !link.submit &&
                  !mini.submit &&
                  !texts.submit &&
                  !href.submit
                "
              >
                <el-button
                  size="small"
                  class="btn-white"
                  @click="
                    () => {
                      contType = 1;
                      type = 1;
                      reqGetContentGroupList();
                      pickVisible = true;
                    }
                  "
                  >添加快捷消息</el-button
                >

                <el-button
                  size="small"
                  class="btn-white"
                  @click="
                    () => {
                      contType = 2;
                      type = 2;
                      reqGetContentGroupList();
                      pickVisible = true;
                    }
                  "
                  >添加图片</el-button
                >

                <el-button
                  size="small"
                  class="btn-white"
                  @click="
                    () => {
                      type = 3;
                      contType = 3;
                      reqGetContentGroupList();
                      pickVisible = true;
                    }
                  "
                  >添加文章</el-button
                >
                <el-button
                  size="small"
                  class="btn-white"
                  @click="
                    () => {
                      contType = 6;
                      reqGetContentGroupList();
                      type = 6;
                      pickVisible = true;
                    }
                  "
                  >添加小程序</el-button
                >
                <el-button
                  size="small"
                  class="btn-white"
                  @click="
                    () => {
                      contType = 8;
                      reqGetContentGroupList();
                      type = 8;
                      pickVisible = true;
                    }
                  "
                  >添加跳转链接</el-button
                >
              </div>
              <div v-show="contType === 2 && image.submit" class="show-data">
                <span
                  @click="
                    () => {
                      pickVisible = true;
                    }
                  "
                >
                  <!-- {{ image.data.file_name }} -->
                  <img :src="image.data.content" width="50" height="50" alt="" />
                </span>
                <i
                  @click="
                    () => {
                      image.data = '';
                      image.submit = false;
                      contId = '';
                    }
                  "
                  class="el-icon-close"
                ></i>
              </div>
              <div v-show="contType === 1 && texts.submit" class="show-data">
                <!-- <i @click="handleText" class="el-icon-link"></i> -->
                <span @click="handleText">{{ texts.data.content }}</span>
                <i @click="delText" class="el-icon-close"></i>
              </div>
              <div v-show="contType === 3 && link.submit" class="show-data">
                <i @click="handleLink" class="el-icon-link"></i>
                <span @click="handleLink">{{ link.data.title }}</span>
                <i
                  @click="
                    () => {
                      link.data = '';
                      link.changeData = '';
                      link.submit = false;
                      contId = '';
                    }
                  "
                  class="el-icon-close"
                ></i>
              </div>
              <div v-show="contType === 8 && href.submit" class="show-data">
                <i @click="handleHref" class="el-icon-link"></i>
                <span @click="handleHref">{{ href.data.title }}</span>
                <i
                  @click="
                    () => {
                      href.data = '';
                      href.changeData = '';
                      href.submit = false;
                      contId = '';
                    }
                  "
                  class="el-icon-close"
                ></i>
              </div>
              <div v-show="contType === 6 && mini.submit" class="show-data">
                <svg
                  @click="handleMini"
                  t="1609929975914"
                  class="icon"
                  style="cursor: pointer"
                  viewBox="0 0 1025 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3010"
                  width="14"
                  height="14"
                >
                  <path
                    d="M740.672 37.504c156.352 0 283.52 115.584 283.52 258.496 0 44.416-13.056 87.872-36.608 127.04-35.648 57.216-92.672 99.584-161.664 119.744a161.408 161.408 0 0 1-45.184 7.36 52.8 52.8 0 0 1-53.76-52.928c0-29.76 23.68-52.864 53.76-52.864 2.112 0 6.528 0 11.904-2.048 46.336-12.8 82.944-39.168 103.424-74.24 13.952-22.144 20.48-46.72 20.48-72.064 0-83.84-78.72-152.512-174.72-152.512a197.76 197.76 0 0 0-94.72 24.32c-50.816 28.544-80.896 76.16-80.896 128.192v443.904c0 89.984-50.752 172.672-134.848 219.328-45.184 25.408-96 38.272-147.712 38.272-156.288 0-283.52-115.648-283.52-258.56 0-44.352 13.12-87.872 36.608-127.04 35.648-57.216 92.736-99.584 161.664-119.68 19.328-5.312 32.384-7.36 45.184-7.36 30.272 0 53.824 23.36 53.824 52.864a52.8 52.8 0 0 1-53.76 52.928c-2.176 0-6.592 0-11.904 2.048-46.4 13.76-82.944 40.32-103.424 74.176-14.016 22.208-20.48 46.72-20.48 72.128 0 83.84 78.72 152.448 175.616 152.448a197.76 197.76 0 0 0 94.784-24.256c50.752-28.608 80.832-76.224 80.832-128.192V296.192c0-89.984 50.752-172.608 134.848-219.328a283.52 283.52 0 0 1 146.752-39.36z"
                    fill="#333333"
                    p-id="3011"
                  ></path>
                </svg>
                <span @click="handleMini">{{ mini.data.title }}</span>
                <i
                  @click="
                    () => {
                      mini.data = '';
                      mini.changeData = '';
                      mini.submit = false;
                      contId = '';
                    }
                  "
                  class="el-icon-close"
                ></i>
              </div>
            </div>
            <div class="btns">
              <el-button size="small" class="btn-white" @click="handlePrev"
                >上一步</el-button
              >
              <el-button size="small" class="btn-blue" @click="handleCreateLiveCode">{{
                $route.query.id ? "更新" : "创建"
              }}</el-button>
            </div>
          </div>
        </div>
        <div class="btns fiexd" v-show="!form.scanCodeSwitch">
          <el-button size="small" class="btn-white" @click="handlePrev">上一步</el-button>
          <el-button size="small" class="btn-blue" @click="handleCreateLiveCode"
            >创建</el-button
          >
        </div>
      </div>
    </div>

    <!-- 选择素材 -->
    <el-dialog
      title="选择素材"
      :visible.sync="pickVisible"
      width="630px"
      :close-on-click-modal="false"
    >
      <div
        v-loading="contLoading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      >
        <div class="btns-top">
          <SelectTree
            v-if="!contLoading"
            :options="allContGroupList"
            :props="contProps"
            :accordion="false"
            :value="pickGroupId"
            @getValue="getPickGroupId"
          />
          <el-input
            style="width: 220px"
            size="small"
            placeholder="输入标题/内容进行搜索"
            v-model="contSearch"
            maxlength="50"
          >
          </el-input>
          <el-button
            size="small"
            class="btn-blue"
            @click="
              () => {
                ContentList();
              }
            "
            >查找</el-button
          >
          <el-button
            size="small"
            class="btn-white"
            @click="
              () => {
                contSearch = '';
                ContentList();
              }
            "
            >清空</el-button
          >
          <el-button
            v-show="type === 2"
            size="small"
            class="btn-blue"
            @click="
              () => {
                uploadVisible = true;
              }
            "
            >本地上传</el-button
          >
          <el-button
            v-show="type === 3"
            size="small"
            class="btn-blue"
            @click="
              () => {
                addTextImg = true;
                pickVisible = false;
              }
            "
            >新建</el-button
          >
          <el-button
            v-show="type != 2 && type != 3"
            size="small"
            class="btn-blue"
            @click="lookMaterial"
            >新建</el-button
          >
        </div>

        <div v-if="contType == 1" class="text-wrap">
          <span v-show="contList.length === 0" style="display: inline-block; margin: auto"
            >暂无数据</span
          >
          <div
            v-show="contList.length !== 0"
            @click="handlePickImg(item)"
            :ref="item.id"
            v-for="(item, index) in contList"
            :key="index"
          >
            <p class="content">{{ item.content }}</p>
          </div>
        </div>
        <div class="img-wrap" v-else>
          <span v-show="contList.length === 0" style="display: inline-block; margin: auto"
            >暂无数据</span
          >
          <div
            v-show="contList.length !== 0 && contType != 1"
            class="list"
            @click="handlePickImg(item)"
            :ref="item.id"
            v-for="(item, index) in contList"
            :key="index"
          >
            <img :src="type === 2 ? item.content : item.cover" class="pick-img" alt="" />
            <span class="bgc">{{ item.file_name }}</span>
          </div>
        </div>
        <div class="pagination" v-show="contTotal !== 0">
          <el-pagination
            @size-change="
              (limit) => {
                contLimit = limit;
                ContentList();
              }
            "
            @current-change="
              (page) => {
                contPage = page;
                ContentList();
              }
            "
            :current-page="contPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="contLimit"
            layout="total, prev, pager, next, jumper"
            :total="contTotal"
          >
          </el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" class="btn-white" @click="handlePickCancel"
          >取 消</el-button
        >
        <el-button size="small" class="btn-blue" @click="handlePickConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 上传图片素材 -->
    <el-dialog
      title="上传图片素材"
      :visible.sync="uploadVisible"
      :close-on-click-modal="false"
      width="500px"
      :before-close="
        (done) => {
          uploadForm.uploadFile = '';
          done();
        }
      "
    >
      <el-form
        v-loading="uploading"
        style="margin-top: 20px"
        label-position="left"
        label-width="100px"
        ref="uploadForm"
        :model="uploadForm"
        :rules="uploadRules"
      >
        <el-form-item style="margin-bottom: 10px" label="上传图片" prop="uploadFile">
          <el-upload
            :class="hideUpload ? 'hide avatar-uploader' : 'avatar-uploader'"
            :action="uploadUrl"
            :data="uploadData"
            :show-file-list="false"
            :on-change="handleUploadChange"
            :on-remove="handleUploadRemove"
            :on-success="reqUploadSuccess"
            :before-upload="beforeImgUpload"
          >
            <img
              v-if="uploadForm.uploadFile"
              :src="uploadForm.uploadFile"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item style="font-size: 12px"
          >（图片大小不超过2M，支持JPG、JPEG及PNG格式）</el-form-item
        >
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" class="btn-white" @click="handleUploadCancel"
          >取 消</el-button
        >
        <el-button size="small" class="btn-blue" @click="uploadSubmit">提 交</el-button>
      </span>
    </el-dialog>

    <!-- 图文 -->
    <el-dialog
      title="新增文章"
      :visible.sync="addTextImg"
      width="1200px"
      @close="
        () => {
          $refs.formLabelAlign.resetFields();
          type = 3;
          contType = 3;
          pickVisible = true;
        }
      "
      :close-on-click-modal="false"
    >
      <el-form
        label-width="200px"
        :model="formLabelAlign"
        ref="formLabelAlign"
        :rules="linkRules"
        class="scroll"
      >
        <el-form-item label="选择分组">
          <SelectTree
            :options="groupOptions"
            :accordion="false"
            :value="formLabelAlign.content_group_id"
            @getValue="handleChange"
          />
        </el-form-item>
        <el-form-item
          label="标题"
          class="limitContent"
          prop="title"
          :rules="[{ required: true, message: '请输入文章标题' }]"
        >
          <el-input
            size="small"
            placeholder="输入文章标题（请勿输入特殊字符）"
            v-model="formLabelAlign.title"
            maxlength="32"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item
          :label="'封面\n（建议尺寸200*200）'"
          prop="cover"
          :rules="[{ required: true, message: '请选择封面图片' }]"
        >
          <img
            v-if="formLabelAlign.cover"
            :src="formLabelAlign.cover"
            class="avatar"
            @click="
              () => {
                contType = 2;
                type = 2;
                reqGetContentGroupList();
                pickVisible = true;
              }
            "
          />
          <i
            v-else
            class="el-icon-plus avatar-uploader-icon"
            @click="
              () => {
                contType = 2;
                type = 2;
                reqGetContentGroupList();
                pickVisible = true;
              }
            "
          ></i>
        </el-form-item>

        <el-form-item
          class="limitContent"
          label="摘要（选填）"
          prop="summary"
          :rules="[{ required: true, message: '请输入文章摘要' }]"
        >
          <el-input
            size="small"
            type="textarea"
            resize="none"
            placeholder="请输入内容"
            v-model="formLabelAlign.summary"
            maxlength="128"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item class="limitContent" label="作者（选填）">
          <el-input
            size="small"
            v-model="formLabelAlign.user"
            maxlength="11"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item class="limitContent" label="原文链接（选填）" prop="link">
          <el-input size="small" v-model="formLabelAlign.link"></el-input>
        </el-form-item>
        <el-form-item label="说明（选填）" class="limitContent">
          <el-input
            size="small"
            v-model="formLabelAlign.explain"
            maxlength="255"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          label="正文"
          prop="content"
          :rules="[{ required: true, message: '请输编辑正文' }]"
        >
          <div class="content">
            <editor-bar
              v-model="formLabelAlign.content"
              :isClear="isClear"
              @change="edtiorContentChange"
            ></editor-bar>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" class="btn-white" @click="handleLinkCancel"
          >取 消</el-button
        >
        <el-button size="small" class="btn-blue" @click="handleLinkConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 小程序 -->
    <el-dialog
      title="小程序"
      :visible.sync="proVisible"
      width="700px"
      :before-close="
        (done) => {
          $refs.miniForm.resetFields();
          done();
        }
      "
      :close-on-click-modal="false"
    >
      <el-form label-width="100px" :model="mini" ref="miniForm" :rules="miniRules">
        <el-form-item label="添加方式">
          <el-radio v-model="addType" label="new">新建</el-radio>
          <el-radio v-model="addType" label="import">导入</el-radio>
        </el-form-item>

        <el-form-item v-show="addType === 'new'" label="图片封面" prop="cover">
          <div
            class="plus-wrap"
            @click="
              () => {
                type = 2;
                pickVisible = true;
              }
            "
            v-show="!mini.cover"
          >
            <i class="el-icon-plus"></i>
          </div>
          <div
            class="plus-wrap"
            style="float: left; position: relative"
            v-show="mini.cover"
          >
            <img :src="mini.cover" alt="" />
            <el-button
              type="text"
              style="color: #6881ec; position: absolute; bottom: -14px; right: -70px"
              @click="
                () => {
                  type = 2;
                  pickVisible = true;
                }
              "
              >重新选择</el-button
            >
          </div>
        </el-form-item>
        <el-form-item v-show="addType === 'new'" label="填写标题" prop="title">
          <el-input maxlength="30" show-word-limit v-model="mini.title"></el-input>
        </el-form-item>
        <el-form-item v-show="addType === 'new'" label="AppID" prop="appid">
          <el-input
            placeholder="请填写小程序AppID，必须是关联到企业的小程序应用"
            v-model="mini.appid"
          >
          </el-input>
        </el-form-item>
        <el-form-item v-show="addType === 'new'" label="Page路径" prop="pagePath">
          <el-input
            placeholder="请填写小程序路径,例如pages/index/index"
            v-model="mini.pagePath"
          ></el-input>
        </el-form-item>
        <el-form-item v-show="addType === 'new'" label="素材同步" required>
          <el-radio v-model="mini.source" :label="1">素材库</el-radio>
          <el-radio v-model="mini.source" :label="2">同步至资料包</el-radio>
          <SelectTree
            v-show="mini.source === 1"
            v-if="!contLoading"
            :options="contGroupList"
            :props="contProps"
            :accordion="false"
            :value="contGroupId"
            @getValue="getContGroupId"
          />
        </el-form-item>
        <el-form-item label="图文" v-show="addType === 'import'">
          <div
            v-show="mini.changeData === ''"
            class="img-text"
            @click="
              () => {
                type = 6;
                pickVisible = true;
              }
            "
          >
            <i class="el-icon-plus"></i>
          </div>
          <div
            v-show="mini.changeData !== ''"
            class="img-text"
            @click="
              () => {
                type = 6;
                pickVisible = true;
              }
            "
          >
            <i class="el-icon-success success"></i>
            <span class="desc">已选择一条小程序</span>
            <span class="edit">修改</span>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" class="btn-white" @click="handleMiniCancel"
          >取 消</el-button
        >
        <el-button size="small" class="btn-blue" @click="handleMiniConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <Material :materialVisible="materialVisible" @closepop="closepop" :types="types" />
  </div>
</template>

<script>
import Material from "@/components/Material.vue";

import {
  reqGetLiveCodeGroupList,
  reqGetCustomTree,
  reqAddCustomLabel,
  reqGetSoloStaff,
  reqGetManyStaff,
  reqGetDepartmentList,
  reqAddLiveQr,
  reqGetContentGroupList,
  ContentList,
  Upload,
  uploadUrl,
  ContentAdd,
  reqShowLive,
  reqGetMediaId,
} from "@/api/index";
import SelectTree from "@/components/SelectTree";
import md5 from "js-md5";
import EditorBar from "@/components/wangwangEditor/wangwangEditor";

export default {
  name: "AddCode",
  components: {
    SelectTree,
    Material,
    EditorBar,
  },
  data() {
    var url = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("跳转链接不能为空"));
      } else if (value.match(/(http|https):\/\/\S*/gi)) {
        return callback();
      } else {
        return callback(
          new Error("请检查跳转链接格式是否正确（以http://或者https://开头）")
        );
      }
    };
    return {
      tool: [
        {
          text: "bibi标签",
          type: "tag",
        },
      ],
      addTextImg: false,
      isClear: false,
      formLabelAlign: {
        content_group_id: "",
        summary: "",
        cover: "",
        content: "",
        user: "",
        link: "",
        wx_cover: "",
        title: "",
        explain: "",
        source: "",
        file_name: "",
      },
      types: "",
      materialVisible: false,
      pickVisible: false,
      uploadVisible: false,
      imgVisible: false,
      proVisible: false,
      disabledName: false,
      active: 1,
      loading: true,
      AddSwitch: false, // 是否设置员工添加上限
      textarea: "",
      radio: 1,
      form: {
        name: "",
        liveCodeId: "",
        groupId: "", //分组ID
        liveCodeName: "", //活码名称
        switchValue: true,
        staff: "",
        scanCodeSwitch: true, // 是否推送
      },
      label: {
        labelGroupName: "", //新增标签组名称
        labelValue: "", //添加标签的所有名称字符
        loading: false,
        labelGroupId: "", //标签组id
        visible: false,
        groupName: "",
        title: "",
      },
      labelRules: {
        labelValue: [
          {
            required: true,
            message: "请输入标签名称",
            trigger: "blur",
          },
        ],
        labelGroupName: [
          {
            required: true,
            message: "请输入标签组名称",
            trigger: "blur",
          },
        ],
      },
      numList: [],
      pickDepartment: [],
      spare_staff_id: "",
      labelIdList: [],
      pickTreeNode: [],
      groupOptions: [],
      options: [],
      defaultProps: {
        children: "group",
        label: "name",
      },
      staffNumber: 0,
      staffCheckList: [],
      customLabelList: [],
      customLabelListLength: 0,
      endIndex: 3,
      fucusIndex: 0,
      text: "",
      oldText: "",
      staff: {
        checked: false,
        page: 1,
        soloData: [],
        manyData: [],
        loading: false,
        visibleMany: false,
        visibleSolo: false,
        manyIn: false,
        search: "",
        props: {
          label: "name",
          children: "group",
        },
        soloName: "",
      },
      pickStaff: "",
      pickStaffList: [],
      onePickList: [],
      pickStaffObj: "",
      departmentList: [],
      departmentValue: "",
      textLength: 0,
      contGroupList: [],
      allContGroupList: [],
      contList: [],
      hideUpload: false,
      contPage: 1,
      contLimit: 8,
      contLoading: false,
      contGroupId: "",
      pickGroupId: "",
      contTotal: 0,
      contSearch: "",
      contType: "",
      uploading: false,
      uploadType: 2,
      nowOperation: "",
      addType: Boolean(this.$route.query.id) ? "import" : "new",
      uploadUrl: "",
      contProps: {
        children: "son",
        label: "name",
      },
      uploadForm: {
        source: 1,
        uploadFile: "",
      },
      uploadRules: {
        uploadFile: [
          {
            required: true,
            message: "请选择图片",
            trigger: "change",
          },
        ],
      },
      image: {
        data: "",
        submit: false,
      },
      link: {
        cover: "",
        title: "",
        summary: "",
        source: 1,
        link: "",
        data: "",
        changeData: "",
        submit: false,
      },
      linkRules: {
        cover: [
          {
            required: true,
            message: "请选择封面图",
            trigger: "blur",
          },
        ],
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur",
          },
        ],
        link: [
          {
            validator: url,
            trigger: "blur",
            required: true,
          },
        ],
        summary: [
          {
            trigger: "blur",
          },
        ],
      },
      href: {
        cover: "",
        title: "",
        appid: "",
        pagePath: "",
        source: 1,
        data: {},
        changeData: "",
        submit: false,
      },
      mini: {
        cover: "",
        title: "",
        appid: "",
        pagePath: "",
        source: 1,
        data: {},
        changeData: "",
        submit: false,
        media_id: "",
      },
      texts: {
        cover: "",
        title: "",
        appid: "",
        pagePath: "",
        source: 1,
        data: "",
        changeData: "",
        submit: false,
      },
      miniRules: {
        cover: [
          {
            required: true,
            message: "请选择封面图",
            trigger: "blur",
          },
        ],
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur",
          },
        ],
        appid: [
          {
            required: true,
            message: "请输入小程序AppID",
            trigger: "blur",
          },
        ],
        pagePath: [
          {
            required: true,
            message: "请输入小程序路径",
            trigger: "blur",
          },
        ],
      },
      uploadData: {},
      uplSucInfo: "",
      pickLiveCodeData: "",
      pickData: "",
      type: 2,
      contId: "",
      filterText: "",
    };
  },
  watch: {
    $route(to, from) {
      if (from.name === "AddCode" && to.name == "CodeManage") {
        this.$destroy();
      }
    },
    pickData(val) {
      if (!val) {
        this.contList.forEach((item) => {
          this.$refs[item.id][0].classList.remove("l-active");
        });
      }
    },
    staff: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        this.staff.soloData.forEach((item) => {
          if (val.soloValue === item.user_id) {
            this.staff.soloName = item.name;
          }
        });
      },
      deep: true,
    },
    pickVisible(val) {
      if (val) {
        this.getContentData();
      }
    },
    // 切换添加方式
    addType(val) {
      if (this.contType === 3) {
        this.$refs["linkForm"].resetFields();
        this.link.cover = "";
        this.link.title = "";
        this.link.summary = "";
        this.link.source = 1;
        this.link.link = "";
        this.link.changeData = "";
      } else if (this.contType === 6) {
        this.$refs["miniForm"].resetFields();
        this.mini.cover = "";
        this.mini.title = "";
        this.mini.appid = "";
        this.mini.source = 1;
        this.mini.pagePath = "";
        this.mini.changeData = "";
      }
      this.contId = "";
    },
    contLoading(val) {
      if (val) {
        this.$nextTick(() => {
          this.contList.forEach((item) => {
            if (item.id === this.contId) {
              this.$refs[item.id][0].classList.add("l-active");
            } else {
              this.$refs[item.id][0].classList.remove("l-active");
            }
          });
        });
      }
    },
    uploadForm: {
      handler(val, oldVal) {
        this.$refs.uploadForm.validateField("uploadFile");
      },
      deep: true,
    },
    radio() {
      if (!Boolean(this.$route.query.id)) {
        this.pickDepartment = [];
        this.pickStaffList = [];
        this.departmentValue = [];
        this.onePickList = [];
        this.staffCheckList = [];
        this.numList = [];
        this.pickStaff = "";
        this.AddSwitch = false;
      }
    },
    text(val) {
      this.$refs["input-text"].innerHTML = val;
    },
    pickGroupId() {
      this.ContentList();
    },
    numList: {
      handler(val) {
        for (let i = 0; i < val.length; i++) {
          if (val[i].num <= 0 || val[i].num === "") {
            val[i].num = 1;
          } else if (val[i].num >= 500) {
            val[i].num = 500;
          }
        }
      },
      deep: true,
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  computed: {
    contentName() {
      if (this.staffCheckList.length !== 0) {
        let content = "";
        this.staffCheckList.forEach((item) => {
          content += item.name + " ";
        });
        return content;
      } else {
        return "";
      }
    },
  },

  mounted() {
    this.form.groupId = this.$route.query.groupId;
    this.getInit();
  },
  created() {
    // console.log(1111)
    // this.$bus.$on("bus", (res) => {
    //   console.log('回来啦')
    // });
  },
  methods: {
    addTag(e, a) {
      // console.log(e)
    },
    chooseImg() {
      this.pickVisible = true;
    },
    edtiorContentChange(val) {
      this.formLabelAlign.content = val;
    },
    handleChange(e) {
      this.formLabelAlign.content_group_id = e;
    },
    getInit() {
      let time = parseInt(new Date().getTime() / 1000);
      let user_id = localStorage.getItem("user_id") || "";
      let token = localStorage.getItem("token") || "";
      let sign = md5(user_id + token + time + md5("shenlanguoshiphoto"));
      this.uploadData.time = time;
      this.uploadData.user_id = user_id;
      this.uploadData.token = token;
      this.uploadData.sign = sign;
      this.uploadData.type = 2;
      this.uploadUrl = uploadUrl;
      let oDiv = this.$refs["custom-textarea"];
      let oText = this.$refs["input-text"];
      let oP = [];
      oP[0] = reqGetLiveCodeGroupList({});
      oP[1] = reqGetCustomTree({});
      oP[2] = reqGetSoloStaff({
        page: this.staff.page,
        limit: 10000,
      });
      oP[3] = reqGetManyStaff({});
      oP[4] = reqGetDepartmentList({});
      Promise.all(oP).then((values) => {
        this.loading = false;
        if (values[0].code === 200) {
          this.groupOptions = values[0].data;
        } else {
          this.groupOptions = [];
        }
        if (values[1].code === 200) {
          this.customLabelList = values[1].data;
          this.customLabelListLength = values[1].data.length;
        } else {
          this.customLabelList = [];
          this.customLabelListLength = 0;
        }
        if (values[2].code === 200) {
          this.staff.soloData = values[2].data;
        } else {
          this.staff.soloData = [];
        }
        if (values[3].code === 200) {
          this.staff.manyData = values[3].data;
        } else {
          this.staff.manyData = [];
        }
        if (values[4].code === 200) {
          this.departmentList = values[4].data;
        } else {
          this.departmentList = [];
        }
        if (this.$route.query.id) {
          this.form.liveCodeId = this.$route.query.id;
          this.getEditInfo(this.$route.query.id);
        }
        console.log(this.form.liveCodeId);
      });
    },
    // 获取编辑回显
    async getEditInfo(id) {
      this.loading = true;
      let res = await reqShowLive({
        id,
      });
      if (res.code === 200) {
        this.loading = false;
        let data = JSON.parse(JSON.stringify(res.data));
        this.form.groupId = data.group_id;
        this.form.liveCodeName = data.name;
        if (data.tag_name.length !== 0) {
          this.labelIdList = data.tag_ids.split(",");
          this.labelIdList.forEach((item) => {
            this.$nextTick(() => {
              this.$refs[item][0].$el.classList.add("btn-blue");
            });
          });
        }
        if (data.code_type === "多人") {
          this.radio = 2;
        } else if (data.code_type === "单人") {
          this.radio = 1;
        }
        if (data.add_limit) {
          this.numList = data.add_limit;
        }
        if (data.is_add_friends === 1) {
          this.form.switchValue = true;
        } else if (data.is_add_friends === 0) {
          this.form.switchValue = false;
        }
        if (data.wxk_department_id) {
          this.pickDepartment = [];
          data.wxk_department_id.split(",").forEach((item) => {
            this.departmentList.forEach((res) => {
              if (item == res.code) {
                this.pickDepartment.push(res);
              }
            });
          });
        }
        if (data.wxk_staff_id) {
          this.pickStaffList = [];
          this.staffCheckList = [];
          data.wxk_staff_id.split(",").forEach((item) => {
            this.staff.soloData.forEach((res) => {
              if (item == res.user_id) {
                this.pickStaffList.push(res);
                this.staffCheckList.push(res);
              }
            });
          });
        }
        if (data.is_add_limit === 1) {
          this.AddSwitch = true;
        } else if (data.is_add_limit === 0) {
          this.AddSwitch = false;
        }
        this.spare_staff_id = data.spare_staff_id;
        this.form.scanCodeSwitch = Boolean(data.is_welcome_msg);
        if (data.is_welcome_msg === 1) {
          let oDiv = this.$refs["custom-textarea"];
          let oText = this.$refs["input-text"];
          let str = `<span contenteditable="false" class="custom-span">客户名称</span>`;
          let welcome_data = data.welcome_data;
          if (welcome_data.text) {
            oDiv.innerHTML = welcome_data.text.content.split("{name}").join(str);
            oText.innerHTML = oDiv.innerHTML;
            this.textLength = oDiv.textContent.length;
            this.text = oDiv.innerHTML;
          }
          console.log(welcome_data);

          if (welcome_data.link) {
            this.contType = 3;
            this.link.data = welcome_data.link;
            this.link.data.cover = welcome_data.link.picurl;
            this.link.data.link = welcome_data.link.url;
            this.link.data.summary = welcome_data.link.desc;
            this.link.submit = true;
          } else if (welcome_data.image) {
            this.contType = 2;
            this.image.data = welcome_data.image;
            this.image.data.content = welcome_data.image.pic_url;
            this.image.submit = true;
            this.reqGetMediaId(welcome_data.image.media_id);
          } else if (welcome_data.miniprogram) {
            console.log(welcome_data.miniprogram);
            this.contType = 6;
            this.mini.submit = true;
            // pic_media_id: this.mini.data.media_id,
            //   appid: this.mini.data.applets_id,
            //   page: this.mini.data.applets_path,
            // this.mini.data = welcome_data.miniprogram;
            this.mini.data.media_id = welcome_data.miniprogram.pic_media_id;
            this.mini.data.applets_id = welcome_data.miniprogram.appid;
            this.mini.data.applets_path = welcome_data.miniprogram.page;
            this.mini.data.title = welcome_data.miniprogram.title;
            this.reqGetMediaId(welcome_data.miniprogram.pic_media_id);
          }
          //  else if (welcome_data.texts) {
          //   this.contType = 1;
          //   this.texts.submit = true;
          //   this.reqGetMediaId(welcome_data.texts.content);
          // } else if (welcome_data.href) {
          //   this.contType = 8;
          //   this.texts.submit = true;
          //   this.reqGetMediaId(welcome_data.href.pic_media_id);
          // }
          // console.log(this.contType);
        }
      } else {
        this.$message.error(res.msg);
      }
    },
    async reqGetMediaId(media_id) {
      // let res = await reqGetMediaId({
      //   media_id,
      // });
      // console.log(res)
      // if (res.code === 200) {
      if (this.contType === 6) {
        let res = await reqGetMediaId({
          type: 6,
          media_id,
        });
        if (res.code == 200) {
          this.mini.data.cover = res.data.cover;
          this.mini.submit = true;
          console.log(this.mini.data);
        }
      } else if (this.contType === 2) {
        let res = await reqGetMediaId({
          type: 2,
          media_id,
        });
        if (res.code == 200) {
          this.contId = res.data.id;
        }
      }
      // } else {
      //   this.$message.error(res.msg);
      // }
    },
    // 获取分组列表
    async reqGetLiveCodeGroupList() {
      let res = await reqGetLiveCodeGroupList({});
      if (res.code === 200) {
        this.groupOptions = res.data;
      } else {
        this.groupOptions = [];
      }
    },
    //  获取客户标签树结构
    async reqGetCustomTree() {
      this.label.loading = true;
      let res = await reqGetCustomTree({});
      this.label.loading = false;
      if (res.code === 200) {
        this.customLabelList = res.data;
        this.customLabelListLength = res.data.length;
      } else {
        this.customLabelList = [];
        this.customLabelListLength = 0;
      }
    },
    // 新增客户标签
    async reqAddCustomLabel(option) {
      let res = await reqAddCustomLabel(option);
      if (res.code === 200) {
        this.reqGetCustomTree();
        this.label.visible = false;
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },

    // 获取单人成员列表
    async reqGetSoloStaff() {
      let res = await reqGetSoloStaff({
        page: this.staff.page,
        limit: 1000,
      });
      if (res.code === 200) {
        this.staff.soloData = res.data;
      } else {
        this.staff.soloData = [];
      }
    },
    // 获取多人成员列表
    async reqGetManyStaff() {
      let res = await reqGetManyStaff({});
      if (res.code === 200) {
        this.staff.manyData = res.data;
      } else {
        this.staff.manyData = [];
      }
    },
    delText() {
      this.texts.data = "";
      this.texts.changeData = "";
      this.texts.submit = false;
      this.contId = "";
      let oDiv = this.$refs["custom-textarea"];
      this.text = oDiv.innerHTML = "";
      this.textLength = oDiv.textContent.length;
    },
    // 获取部门列表
    async reqGetDepartmentList() {
      let res = await reqGetDepartmentList({});
      if (res.code === 200) {
        this.departmentList = res.data;
      } else {
        this.departmentList = [];
      }
    },
    // 新增编辑活码
    async reqAddLiveQr(option) {
      let res = await reqAddLiveQr(option);
      if (res.code === 200) {
        this.$message.success(res.msg);
        this.$router.push("/live_code/manage");
      } else {
        this.$message.error(res.msg);
      }
    },
    // 获取素材分组列表
    async reqGetContentGroupList() {
      this.contLoading = true;
      let res = await reqGetContentGroupList({});
      if (res.code === 200) {
        this.contGroupList = JSON.parse(JSON.stringify(res.data.data));
        this.allContGroupList = JSON.parse(JSON.stringify(res.data.data));
        this.allContGroupList.unshift({
          id: "",
          name: "所有",
        });
        this.pickGroupId = "";
        this.contGroupId = JSON.parse(JSON.stringify(res.data.data))[0].id;
      } else {
        this.contGroupList = [];
        this.allContGroupList = [];
        this.pickGroupId = "";
        this.contGroupId = "";
      }
      this.contLoading = false;
    },

    // 获取内容列表
    async ContentList(params = false) {
      let res = await ContentList({
        type: this.type,
        content_group_id: this.pickGroupId,
        search_name: this.contSearch,
        page: this.contPage,
        limit: this.contLimit,
      });
      if (res.code == 200) {
        this.contList = res.data.data;
        if (params) {
          this.contId = res.data.data[0].id;
        }
        this.$nextTick(() => {
          this.contList.forEach((item) => {
            if (item.id === this.contId) {
              this.$refs[item.id][0].classList.add("l-active");
            } else {
              this.$refs[item.id][0].classList.remove("l-active");
            }
          });
        });
      } else {
        this.contList = [];
      }
    },

    //  添加内容
    async ContentAdd(option, flag = false) {
      this.uploading = true;
      let res = await ContentAdd(option);
      this.uploading = false;
      // console.log(res)
      if (res.code === 200) {
        this.contId = "";
        this.uploadVisible = false;
        this.ContentList(true);

        // this.pickVisible = false;
        // if (this.contType === 2) {
        //   this.image.data = this.uplSucInfo;
        //   this.image.submit = true;
        // } else if (this.contType === 3) {
        //   if (flag) {
        //     this.imgVisible = false;
        //     this.link.submit = true;
        //   } else {
        //     this.link.data = this.uplSucInfo;
        //     this.link.cover = this.uplSucInfo.content;
        //   }
        // } else if (this.contType === 6) {
        //   if (flag) {
        //     this.proVisible = false;
        //     this.mini.submit = true;
        //   } else {
        //     this.mini.data = this.uplSucInfo;
        //     this.mini.cover = this.uplSucInfo.content;
        //   }
        // }
      } else {
        this.$message.error(res.msg);
      }
    },
    // 多人选择成员搜索
    filterNode(value, data) {
      // console.log(value, data);
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //  选择多名企业成员弹窗关闭事件
    pickManyBeforeClose(done) {
      done();
      this.staffCheckList = JSON.parse(JSON.stringify(this.pickStaffList));
      this.$nextTick(() => {
        this.$refs.tree.setCheckedNodes([]);
      });
    },
    // 选择多名企业成员弹窗取消事件
    handlePickManyCancel() {
      this.staff.manyIn = false;
    },
    // 选择多名企业成员弹窗确定事件
    handlePickManyConfirm() {
      this.onePickList = JSON.parse(JSON.stringify(this.staffCheckList));
      this.staff.manyIn = false;
    },
    // 选择多人企业成员
    pickManyStaff() {
      this.staff.manyIn = true;
      this.$nextTick(() => {
        this.$refs.tree.setCheckedNodes(this.staffCheckList);
      });
    },
    // 添加多人确定按钮
    addManyConfirm() {
      if (this.departmentValue.length !== 0 || this.staffCheckList.length !== 0) {
        this.pickDepartment = [];
        this.departmentList.forEach((item) => {
          this.departmentValue.forEach((res) => {
            if (item.code == res) {
              this.pickDepartment.push(item);
            }
          });
        });
        this.pickStaffList = this.onePickList;
        if (this.pickStaffList.length === 0) {
          this.AddSwitch = false;
        }
        this.staff.visibleMany = false;
      } else {
        this.$message.warning("请选择部门或者企业成员！");
      }
    },
    // 员工添加上限开发
    changeAddswitch(val) {
      if (this.radio === 1) {
        if (this.pickStaffList.length !== 0) {
          this.numList = [];
          this.pickStaffList.map((item, index) => {
            this.numList.push({
              name: item.name,
              user_id: item.user_id,
              num: 100,
            });
          });
          this.AddSwitch = val;
        } else {
          this.AddSwitch = false;
          this.$message.warning("请先选择成员");
        }
      } else if (this.radio === 2) {
        if (this.pickStaffList.length !== 0) {
          this.numList = [];
          this.pickStaffList.map((item, index) => {
            this.numList.push({
              name: item.name,
              user_id: item.user_id,
              num: 100,
            });
          });
          this.AddSwitch = val;
        } else {
          if (this.pickDepartment.length !== 0) {
            this.$message.warning("因受官方限制，无法对动态部门的员工设置添加好友上限");
          } else {
            this.$message.warning("请先选择成员");
          }
          this.AddSwitch = false;
        }
      }
    },
    // 选择素材取消事件
    handlePickCancel() {
      this.pickVisible = false;
      this.pickData = "";
      this.contList.forEach((item) => {
        if (item.id === this.contId) {
          this.$refs[item.id][0].classList.add("l-active");
        } else {
          this.$refs[item.id][0].classList.remove("l-active");
        }
      });
    },
    // 选择素材确定事件
    handlePickConfirm() {
      if (this.pickData.id) {
        this.contId = this.pickData.id;
      }
      if (this.contId) {
        this.contList.forEach((item) => {
          if (item.id === this.contId) {
            if (this.contType === 2) {
              if (this.addTextImg == true) {
                this.formLabelAlign.cover = item.content;
                this.formLabelAlign.file_name = item.file_name;
                this.type = 3;
              } else {
                this.image.data = item;
                this.image.submit = true;
              }
            } else if (this.contType === 3) {
              this.link.changeData = item;
              this.link.data = this.link.changeData;
              this.imgVisible = false;
              this.link.submit = true;
            } else if (this.contType === 6) {
              // console.log(item);
              this.mini.changeData = item;
              this.mini.submit = true;
              this.mini.data = this.mini.changeData;
            } else if (this.contType === 1) {
              let oDiv = this.$refs["custom-textarea"];
              this.text = oDiv.innerHTML = item.content = item.content;
              this.textLength = oDiv.textContent.length;
              this.texts.changeData = item;
              this.texts.submit = true;
              this.texts.data = this.texts.changeData;
            } else if (this.contType === 8) {
              this.href.changeData = item;
              this.href.submit = true;
              this.href.data = this.href.changeData;
            }
          }
        });
        this.pickVisible = false;
      } else {
        this.$message.warning("请选择素材！");
      }
    },
    // 图文确定添加
    handleLinkConfirm() {
      this.contType = 3;
      this.$refs["formLabelAlign"].validate(async (valid) => {
        if (valid) {
          let arr = [];
          arr.push({
            content_group_id: this.formLabelAlign.content_group_id,
            type: "3",
            user: this.formLabelAlign.user,
            title: this.formLabelAlign.title,
            content: this.formLabelAlign.content,
            cover: this.formLabelAlign.cover,
            wx_cover: this.formLabelAlign.wx_cover,
            summary: this.formLabelAlign.summary,
            link: this.formLabelAlign.link,
            explain: this.formLabelAlign.explain,
            user_id: localStorage.getItem("phone"),
            source: 1,
            file_name: this.formLabelAlign.file_name,
          });
          let res = await ContentAdd({
            arr: arr,
          });
          if (res.code == "200") {
            this.addTextImg = false;
            this.reqGetContentGroupList();
            // this.pickVisible = true;
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        }
      });
    },
    // 图文添加取消
    handleLinkCancel() {
      this.$refs["formLabelAlign"].resetFields();
      // this.link.changeData = "";
      this.addTextImg = false;
    },

    // 小程序确定添加
    handleMiniConfirm() {
      this.contType = 6;
      if (this.addType === "new") {
        this.$refs["miniForm"].validate((valid) => {
          if (valid) {
            let option = {};
            let obj = {};
            obj.type = 6;
            obj.user = localStorage.getItem("phone") || "";
            obj.title = this.mini.title;
            this.mini.data.title = this.mini.title;
            this.mini.data.cover = this.mini.data.content;
            obj.content = this.mini.data.content;
            obj.cover = this.mini.cover;
            obj.media_id = this.mini.data.media_id;
            obj.created_at = this.mini.data.created_at;
            obj.source = this.mini.data.source;
            obj.applets_id = this.mini.appid;
            obj.applets_path = this.mini.pagePath;
            obj.content_group_id = this.contGroupId;
            this.mini.data.applets_id = this.mini.appid;
            this.mini.data.applets_path = this.mini.pagePath;
            option.arr = [];
            option.arr.push(obj);
            this.ContentAdd(option, true);
          }
        });
      } else if (this.addType === "import") {
        if (this.mini.changeData) {
          this.proVisible = false;
          this.mini.submit = true;
          this.mini.data = this.mini.changeData;
        } else {
          this.$message.warning("请选择小程序！");
        }
      }
    },
    // 小程序取消添加
    handleMiniCancel() {
      this.$refs["miniForm"].resetFields();
      this.mini.changeData = "";
      this.proVisible = false;
    },
    // 获取内容分组ID
    getContGroupId(id) {
      this.contGroupId = id;
    },
    getPickGroupId(id) {
      this.pickGroupId = id;
    },
    // 选择图片限制
    beforeImgUpload(file) {
      const isJPG = file.type === "image/jpg";
      const isJPEG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 <= 2;
      if (!isJPG && !isJPEG && !isPNG) {
        this.$message.error("上传图片只能是 JPG、JPEG、PNG 格式!");
      } else if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return (isJPG && isLt2M) || (isLt2M && isJPEG) || (isLt2M && isPNG);
    },
    // 提交上传
    uploadSubmit() {
      this.$refs["uploadForm"].validate((valid) => {
        if (valid) {
          this.uplSucInfo.type = 2;
          this.uplSucInfo.user = localStorage.getItem("phone");
          this.uplSucInfo.source = this.uploadForm.source;
          this.ContentAdd({
            arr: [this.uplSucInfo],
          });
        }
      });
    },
    // 上传完成回调
    reqUploadSuccess(res, file) {
      this.uploadForm.uploadFile = URL.createObjectURL(file.raw);
      this.uplSucInfo = res.data;
    },
    // 选择素材
    handlePickImg(data) {
      this.contList.forEach((item) => {
        this.$refs[item.id][0].classList.remove("l-active");
      });
      this.$refs[data.id][0].classList.add("l-active");
      this.pickData = data;
    },
    // 取消上传
    handleUploadCancel() {
      this.uploadForm.uploadFile = "";
      this.uploadVisible = false;
      this.$refs.uploadForm.resetFields();
    },
    // 上传内容变化触发
    handleUploadChange(file, fileList) {
      this.hideUpload = fileList.length >= 1;
    },
    // 上传内容删除
    handleUploadRemove(file, fileList) {
      this.uploadForm.uploadFile = "";
      this.hideUpload = fileList.length >= 1;
    },
    // 获取素材相关数据
    getContentData() {
      this.contLoading = true;
      let oP = [];
      oP[0] = reqGetContentGroupList({});
      oP[1] = ContentList({
        search_name: "",
        type: this.type,
        content_group_id: "",
        page: this.contPage,
        limit: this.contLimit,
      });
      Promise.all(oP).then((values) => {
        this.contLoading = false;
        if (values[0].code === 200) {
          if (values[0].data.data.length !== 0) {
            this.contGroupList = JSON.parse(JSON.stringify(values[0].data.data));
            this.allContGroupList = JSON.parse(JSON.stringify(values[0].data.data));
            this.allContGroupList.unshift({
              id: "",
              name: "所有",
            });
            this.contGroupId = JSON.parse(JSON.stringify(values[0].data.data))[0].id;
            this.pickGroupId = "";
          }
        } else {
          this.$message.error(values[0].msg);
          this.contGroupList = [];
          this.allContGroupList = [];
          this.contGroupId = "";
          this.pickGroupId = "";
        }
        if (values[1].code === 200) {
          this.contTotal = values[1].data.total;
          this.contList = values[1].data.data;
          this.$nextTick(() => {
            // console.log(this.contList);
            this.contList.forEach((item) => {
              if (item.id === this.contId) {
                // console.log(this.$refs[item.id])
                this.$refs[item.id][0].classList.add("l-active");
              } else {
                this.$refs[item.id][0].classList.remove("l-active");
              }
            });
          });
        } else {
          this.$message.error(values[1].msg);
          this.contList = [];
          this.contTotal = 0;
        }
      });
    },
    //  创建活码
    handleCreateLiveCode() {
      let is_add_friends = "";
      let is_welcome_msg = "";
      let is_add_limit = "";
      let tag_ids = "";
      let content = "";
      let ele = document.getElementById("textarea");
      let str = `<span contenteditable="false" class="custom-span">客户名称</span>`;
      let image = {};
      let link = {};
      let miniprogram = {};
      let welcome_data = {};
      let add_limit = [];
      let wxk_staff_id = "";

      if (this.radio === 1 && this.AddSwitch) {
        add_limit = [];
        let obj = {};
        obj.user_id = this.pickStaffList[0].user_id;
        obj.num = this.numList[0].num;
        add_limit.push(obj);
      } else if (this.radio === 2 && this.AddSwitch) {
        if (this.numList.length !== 0) {
          add_limit = [];
          this.numList.forEach((item) => {
            let obj = {};
            obj.user_id = item.user_id;
            obj.num = item.num;
            add_limit.push(obj);
          });
        }
      }
      content = this.text.split(str).join("{name}");
      // console.log(content)
      if (this.form.switchValue) {
        is_add_friends = 1;
      } else {
        is_add_friends = 0;
      }
      if (this.AddSwitch) {
        is_add_limit = 1;
      } else {
        is_add_limit = 0;
      }
      if (this.labelIdList.length !== 0) {
        tag_ids = this.labelIdList.join(",");
      }
      let option = {
        group_id: this.form.groupId, //分组id
        name: this.form.liveCodeName, // 活码名称
        is_add_friends, //是否自动添加好友(1-是 0-否)
        is_add_limit,
        tag_ids, // 客户标签ID，可多个逗号分隔
        code_type: this.radio, // 活码成员类型（1-单人 2-多人 ）
        is_welcome_msg, // 是否开启扫码推送欢迎语（1-是 0-否 ）
      };
      if (this.form.scanCodeSwitch) {
        is_welcome_msg = 1;
      } else {
        is_welcome_msg = 0;
      }

      if (is_add_limit === 1) {
        option.spare_staff_id = this.spare_staff_id;
      }
      if (this.AddSwitch) {
        option.add_limit = add_limit;
        option.spare_staff_id = this.spare_staff_id;
      }
      if (this.radio == 1) {
        option.wxk_staff_id = this.pickStaffList[0].user_id;
      } else if (this.radio == 2 && this.pickStaffList.length !== 0) {
        let userId = [];
        this.pickStaffList.map((item) => {
          userId.push(item.user_id);
        });
        option.wxk_staff_id = userId.join(",");
      }
      if (this.$route.query.id) {
        option.id = this.$route.query.id;
        // option.id = this.form.liveCodeId;
      }
      if (this.pickDepartment.length !== 0) {
        let wxk_department_id = [];
        this.pickDepartment.forEach((item) => {
          wxk_department_id.push(item.code);
        });
        option.wxk_department_id = wxk_department_id.join(",");
      }

      if (this.form.scanCodeSwitch) {
        if (
          content ||
          this.image.submit ||
          this.link.submit ||
          this.mini.submit ||
          this.texts.submit ||
          this.href.submit
        ) {
          if (content) {
            content = content
              .split("<div>")
              .join("<br>")
              .split("</div>")
              .join("")
              .split("<p>")
              .join("<br>")
              .split("</p>")
              .join("");
            welcome_data.text = {};
            welcome_data.text.content = content;
          }
          console.log(this.image.submit);
          console.log(this.link.submit);
          console.log(this.href.submit);
          console.log(this.mini.submit);
          if (this.image.submit) {
            welcome_data.image = {
              media_id: this.image.data.media_id,
              pic_url: this.image.data.content,
            };
          } else if (this.link.submit) {
            welcome_data.link = {
              title: this.link.data.title,
              picurl: this.link.data.cover,
              desc: this.link.data.explain,
              url: this.link.data.link
                ? this.link.data.link
                : this.baseURL +
                  "/article-preview/huankemao_h5.html?id=" +
                  this.link.data.id +
                  "&type=1",
              // url:
            };
          } else if (this.mini.submit) {
            console.log(this.mini.data);

            welcome_data.miniprogram = {
              title: this.mini.data.title,
              pic_media_id: this.mini.data.media_id,
              appid: this.mini.data.applets_id,
              page: this.mini.data.applets_path,
            };
          } else if (this.href.submit) {
            welcome_data.link = {
              title: this.href.data.title,
              picurl: this.href.data.cover,
              desc: this.href.data.summary,
              url: this.href.data.link,
            };
          }
          option.is_welcome_msg = is_welcome_msg;
          option.welcome_data = welcome_data;
          this.reqAddLiveQr(option);
        } else {
          this.$message.warning("最少推送一种类型");
        }
      } else {
        option.is_welcome_msg = is_welcome_msg;
        this.reqAddLiveQr(option);
      }
    },
    // 选择企业成员
    handleCheckStaff(data, dataList) {
      let arr = dataList.checkedNodes;
      let newobj = {};
      arr = arr.reduce((preVal, curVal) => {
        newobj[curVal.user_id] ? "" : (newobj[curVal.user_id] = preVal.push(curVal));
        return preVal;
      }, []);
      this.staffCheckList = arr.filter((res) => {
        return res.user_id;
      });
    },
    // 获取选择分组
    getSelectTreeValue(groupId) {
      this.form.groupId = groupId;
    },
    // 返回活码管理
    handleBack() {
      this.$router.push("/live_code/manage");
    },

    // 选择客户标签
    handlePickLabel(id) {
      let btnDom = this.$refs[id][0].$el;
      if (btnDom.classList.toggle("btn-blue")) {
        if (this.labelIdList.length < 20) {
          this.labelIdList.push(id);
        } else {
          btnDom.classList.remove("btn-blue");
          this.$message.warning("客户标签最多设置20个");
        }
      } else {
        this.labelIdList.splice(
          this.labelIdList.findIndex((item) => item.id === id),
          1
        );
      }
    },
    // 新增标签
    handleAddLabel(data) {
      this.label.labelGroupName = data.name;
      this.label.labelGroupId = data.id;
      this.label.visible = true;
      this.label.labelValue = "";
      this.label.title = "新增标签";
    },
    // 新增标签组
    handleAddLabelGroup() {
      this.label.title = "新增标签组";
      this.label.labelGroupName = "";
      this.label.labelValue = "";
      this.label.labelGroupId = "";
      this.label.visible = true;
    },
    // 确认新增标签/标签组
    handleSubmitLabel() {
      if (this.label.title === "新增标签") {
        this.$refs.labelForm1.validate((valid) => {
          if (valid) {
            let tag = [];
            let flag = true;
            tag = this.label.labelValue.split(" ");
            tag = tag.filter((res) => {
              return res != false;
            });
            flag = tag.every((res) => {
              return res.length <= 15;
            });
            if (flag) {
              tag.map((item, index) => {
                tag[index] = {
                  name: item,
                };
              });
              this.reqAddCustomLabel({
                group_id: this.label.labelGroupId,
                tag,
              });
            } else {
              this.$message.warning("每个标签最多15个字");
            }
          }
        });
      } else {
        this.$refs.labelForm2.validate((valid) => {
          if (valid) {
            let tag = [];
            let flag = true;
            tag = this.label.labelValue.split(" ");
            tag = tag.filter((res) => {
              return res != false;
            });
            flag = tag.every((res) => {
              return res.length <= 15;
            });
            if (flag) {
              tag.map((item, index) => {
                tag[index] = {
                  name: item,
                };
              });
              this.reqAddCustomLabel({
                group_name: this.label.labelGroupName,
                tag,
              });
            } else {
              this.$message.warning("每个标签最多15个字");
            }
          }
        });
      }
    },
    // 弹窗关闭之前
    dialogBeforeClose(done) {
      this.$refs["labelForm1"].resetFields();
      this.$refs["labelForm2"].resetFields();
      done();
    },
    // 下一步
    handleNext() {
      if (this.active === 1) {
        if (this.form.groupId === "") {
          this.$message.warning("请选择分组");
        } else if (this.form.liveCodeName === "") {
          this.$message.warning("请输入活码名称");
        } else {
          this.active = 2;
        }
      } else if (this.active === 2) {
        if (this.AddSwitch) {
          if (this.spare_staff_id) {
            if (this.radio === 1) {
              if (this.pickStaffList.length !== 0) {
                this.active = 3;
              } else {
                this.$message.warning("请添加企业成员！");
              }
            } else if (this.radio === 2) {
              if (this.pickStaffList.length !== 0 || this.pickDepartment.length !== 0) {
                this.active = 3;
              } else {
                this.$message.warning("请添加企业成员或部门！");
              }
            }
          } else {
            this.$message.warning("请选择备用员工");
          }
        } else {
          if (this.radio === 1) {
            if (this.pickStaffList.length !== 0) {
              this.active = 3;
            } else {
              this.$message.warning("请添加企业成员！");
            }
          } else if (this.radio === 2) {
            if (this.pickStaffList.length !== 0 || this.pickDepartment.length !== 0) {
              this.active = 3;
            } else {
              this.$message.warning("请添加企业成员或部门！");
            }
          }
        }
      }
    },
    // 上一步
    handlePrev() {
      this.active--;
    },
    //点击插入
    handleAddBtn() {
      let oDiv = this.$refs["custom-textarea"];
      oDiv.focus();
      let str = `<span contenteditable="false" class="custom-span">客户名称</span>`;
      if (1000 - this.textLength >= 4) {
        this.pasteHtmlAtCaret(str);
        this.text = oDiv.innerHTML;
        this.textLength = oDiv.textContent.length;
      }
    },
    // 插入客户名称
    pasteHtmlAtCaret(html) {
      var sel, range;
      if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
          range = sel.getRangeAt(0);
          range.deleteContents();
          var el = document.createElement("div");
          el.innerHTML = html;
          var frag = document.createDocumentFragment(),
            node,
            lastNode;
          while ((node = el.firstChild)) {
            lastNode = frag.appendChild(node);
          }
          range.insertNode(frag);
          if (lastNode) {
            range = range.cloneRange();
            range.setStartAfter(lastNode);
            range.collapse(true);
            sel.removeAllRanges();
            sel.addRange(range);
          }
        }
      } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
      }
    },
    po_Last_Div(obj) {
      if (window.getSelection) {
        //ie11 10 9 ff safari
        obj.focus(); //解决ff不获取焦点无法定位问题
        var range = window.getSelection(); //创建range
        range.selectAllChildren(obj); //range 选择obj下所有子内容
        range.collapseToEnd(); //光标移至最后
      } else if (document.selection) {
        //ie10 9 8 7 6 5
        var range = document.selection.createRange(); //创建选择对象
        //var range = document.body.createTextRange();
        range.moveToElementText(obj); //range定位到obj
        range.collapse(false); //光标移至最后
        range.select();
      }
    },
    // 监听输入框变化
    changeText(e) {
      let oDiv = this.$refs["custom-textarea"];
      this.text = oDiv.innerHTML;
      this.textLength = oDiv.textContent.length;
      if (this.textLength >= 1000) {
        this.textLength = 1000;
        this.text = oDiv.textContent.slice(0, this.textLength + 1);
        oDiv.innerHTML = this.text;
      }
    },
    handleEditPick() {
      if (this.radio === 1) {
        this.staff.visibleSolo = true;
      } else if (this.radio === 2) {
        this.staffCheckList = JSON.parse(JSON.stringify(this.pickStaffList));
        this.onePickList = JSON.parse(JSON.stringify(this.pickStaffList));
        this.departmentValue = [];
        this.pickDepartment.forEach((item) => {
          if (item.code) {
            this.departmentValue.push(item.code);
          }
        });
        this.staff.visibleMany = true;
      }
    },
    //点击快捷消息
    handleText() {
      this.text.cover = this.text.data.cover;
      this.text.summary = this.text.data.summary || "";
      this.text.title = this.text.data.title;
      this.text.link = this.text.data.link;
      this.text.changeData = this.text.data;
      this.imgVisible = true;
    },
    //点击跳转链接
    handleHref() {
      this.href.cover = this.href.data.cover;
      this.href.summary = this.href.data.summary || "";
      this.href.title = this.href.data.title;
      this.href.link = this.href.data.link;
      this.href.changeData = this.href.data;
      this.imgVisible = true;
    },
    // 点击图文
    handleLink() {
      this.link.cover = this.link.data.cover;
      this.link.summary = this.link.data.summary || "";
      this.link.title = this.link.data.title;
      this.link.link = this.link.data.link;
      this.link.changeData = this.link.data;
      this.imgVisible = true;
    },
    // 点击小程序
    handleMini() {
      this.contType = 6;
      this.reqGetContentGroupList();
      this.type = 6;
      this.pickVisible = true;
      // this.mini.changeData = this.mini.data;
      // this.mini.cover = this.mini.data.cover;
      // this.mini.title = this.mini.data.title;
      // this.mini.appid = this.mini.data.applets_id;
      // this.mini.pagePath = this.mini.data.applets_path;
      // this.mini.source = this.mini.data.source;
      // this.proVisible = true;
    },
    lookMaterial() {
      this.types = this.contType;
      if (this.types == 3) {
        this.pickVisible = false;
        this.$router.push({
          path: "/content/addgraphic",
          query: {
            path: this.$route.name,

            types: 1,
          },
        });
      } else {
        this.materialVisible = true;
      }
    },
    closepop() {
      // console.log(123456)
      this.materialVisible = false;
      this.types = "";
      this.getContentData();
    },
  },
};
</script>

<style lang="less" scoped>
.add-code {
  position: relative;
  width: 100%;
  height: calc(100vh - 140px);
  overflow: hidden;

  .table {
    max-height: 300px;
    overflow-y: auto;
  }

  /deep/.el-form-item {
    margin-bottom: 0 !important;
  }

  /deep/.el-form-item__error {
    padding: 0;
    position: relative;
  }

  /deep/.el-input__count {
    height: 0;
    top: 0;
    line-height: 33px;
  }

  /deep/.el-table td {
    padding: 0 !important;
  }

  /deep/ .el-table th {
    padding: 0 !important;
  }

  /deep/.el-table__header tr {
    line-height: 0 !important;
  }

  /deep/.el-form-item__error {
    position: relative;
  }

  .avatar-uploader .el-upload {
    border: 1px solid #b9c5e9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    border: 1px solid #b9c5e9;
    border-radius: 6px;
    margin-bottom: 8px;
  }

  .avatar {
    width: 120px;
    height: 120px;
    display: block;
    margin-bottom: 8px;
  }

  .el-upload__tip {
    margin: 0;
    font-size: 12px;

    font-weight: 400;
    color: #999999;
    line-height: 17px;
  }

  .head {
    display: flex;
    align-items: center;
  }

  .steps {
    margin-top: 15px;
    width: 100%;
    display: flex;
    align-items: center;

    // > span {
    //   cursor: pointer;
    // }
    span + span {
      margin-left: 10px;
    }

    .circle {
      line-height: 30px;
      color: #fff;
      text-align: center;
      width: 30px;
      height: 30px;
      background-color: #e5ebfb;
      font-size: 20px;
      border-radius: 50%;
    }

    .text {
      font-size: 14px;
      color: #333;
      height: 20px !important;
      border: none;
    }

    .line {
      flex-grow: 1;
      height: 10px;
      background: #e5ebfb;
      border-radius: 5px;
    }

    .active {
      background: #6881ec;
    }
  }

  .main {
    position: absolute;
    top: 100px;
    left: 0;
    right: -5px;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll;

    .form {
      display: flex;
      flex-direction: column;
      margin-top: 20px;

      .el-form-item {
        margin: 0px !important;
      }

      /deep/.el-textarea__inner {
        font-size: 14px;
      }

      .last-text {
        display: inline-block;
        color: #f38b93;
      }

      .tabs-wrap {
        width: 80%;
        height: 300px;
        padding: 20px 10px 20px 20px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #b9c5e9;

        > .el-form {
          height: 100%;
          overflow-x: hidden;
          overflow-y: scroll;
        }
      }

      .info {
        width: calc(100% - 32px);
        padding: 15px;
        color: #333;
        font-size: 14px;
        line-height: 1.3;
        background: #fff7e6;
        border-radius: 6px;
        border: 1px solid #f5daa3;
        margin-bottom: 20px;
      }

      .switch {
        display: flex;
        align-items: center;
        color: #333;
        font-size: 14px;

        span.label {
          width: 180px;
        }
      }

      .phone-main {
        display: flex;
        justify-content: center;
        margin: 30px 0 50px 0;

        > div {
          margin: 0 20px;
        }

        .phone {
          display: flex;
          flex-direction: column;
          width: 350px;
          height: 700px;
          border: 6px solid #333;
          box-shadow: 0px 0px 20px 5px rgba(100, 100, 100, 0.4);
          border-radius: 40px;

          .top-head {
            width: 100%;
            height: 88px;
            background-image: url("../../assets/images/phone_head.png");
            background-size: 100%;
          }

          .phone-foot {
            width: 100%;
            height: 90px;
            background-image: url("../../assets/images/phone_foot.png");
            background-size: 100%;
          }

          > .content {
            width: 100%;
            height: calc(100% - 130px);
            background: #f3f3f3;
            position: relative;
            overflow: hidden;

            .content-main {
              font-size: 14px;
              color: #333;
              position: absolute;
              top: 20px;
              left: 10px;
              right: -5px;
              bottom: 10px;
              overflow-x: hidden;
              overflow-y: scroll;

              .message {
                display: flex;

                .input-value {
                  width: calc(100% - 90px);
                  padding: 10px;
                  min-height: 40px;
                  line-height: 1.5;
                  font-size: 14px;
                  color: #333;
                  background-color: #fff;
                  margin-left: 10px;
                  box-shadow: 0px 0px 12px 0px rgba(47, 75, 168, 0.06);
                  border-radius: 4px 12px 12px 12px;
                  overflow-x: hidden;
                  overflow-y: auto;
                  word-wrap: break-word;
                  user-select: none;
                }

                .avatar-left {
                  width: 32px;
                  height: 32px;
                  border: 1px solid #6881ec;
                  border-radius: 50%;
                  background-color: #fff;
                }

                .imgBox {
                  width: 260px;
                  height: 0; //容器内有内容，所以要将height设为0
                  padding-bottom: 260px; //这里和宽值一样
                  overflow: hidden;
                  position: relative;
                  margin-left: 10px;
                  border-radius: 4px 12px 12px 12px;

                  .pic {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    width: 100%;
                    height: 100%;

                    // max-width: 260px;
                    // height: auto;
                    // object-fit: cover;
                    // border: none;
                  }
                }

                .link {
                  width: 260px;
                  overflow: hidden;
                  margin-left: 10px;
                  background-color: #fff;
                  padding: 10px;
                  border-radius: 4px 12px 12px 12px;

                  > div {
                    margin-top: 10px;
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                    color: #999;

                    span {
                      width: 140px;
                      overflow: hidden;
                      display: -webkit-box;
                      text-overflow: ellipsis;
                      -webkit-box-orient: vertical;
                      word-break: break-all;
                    }

                    .link-cover {
                      width: 115px;
                      height: 115px;
                      object-fit: cover;
                    }
                  }

                  .link-title {
                    width: 100%;
                    line-height: 1.3;
                  }
                }

                .text {
                  width: calc(100% - 90px);
                  padding: 10px;
                  height: 100%;
                  line-height: 1.5;
                  font-size: 14px;
                  color: #333;
                  background-color: #fff;
                  margin-left: 10px;
                  box-shadow: 0px 0px 12px 0px rgba(47, 75, 168, 0.06);
                  border-radius: 4px 12px 12px 12px;
                  overflow-x: hidden;
                  overflow-y: auto;

                  .text-title {
                    width: 100%;
                    line-height: 1.3;
                  }
                }

                .mini {
                  width: 260px;
                  overflow: hidden;
                  margin-left: 10px;
                  background-color: #fff;
                  padding: 10px;
                  border: 1px solid #ccc;
                  border-radius: 5px;

                  > div {
                    margin-top: 10px;
                    display: flex;
                    justify-content: center;
                    font-size: 14px;
                    color: #999;

                    .mini-cover {
                      width: 115px;
                      height: 115px;
                      object-fit: cover;
                    }
                  }

                  .mini-title {
                    width: 100%;
                    line-height: 1.3;
                  }
                }
              }

              .message + .message {
                margin-top: 20px;
              }
            }
          }
        }

        .main-right {
          display: flex;
          flex-direction: column;

          .operate {
            // -webkit-user-select: text !important;
            position: relative;
            width: 640px;
            height: 395px;
            background: #ffffff;
            border-radius: 8px;
            border: 1px solid #b9c5e9;
            padding: 15px;
            color: #333;
            font-size: 14px;

            > span {
              position: absolute;
              top: 225px;
              right: 25px;
              font-size: 12px;
              color: #999;
            }

            .btn {
              margin: 20px 0;
            }

            .custom-textarea {
              -webkit-user-select: text !important;
              font-size: 14px;
              color: #333;
              width: calc(100% - 20px);
              height: 200px;
              padding: 10px 10px 20px;
              background: #ffffff;
              border-radius: 4px;
              border: 1px solid #b9c5e9;
              outline: none;
              overflow-x: hidden;
              overflow-y: auto;
              word-wrap: break-word;
              user-select: none;
            }
          }

          .btns {
            display: flex;
            align-items: center;
            margin-top: 20px;

            .el-button + .el-button {
              margin-left: 10px;
            }
          }
        }
      }
    }
  }

  .dialog-content {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;

    > div {
      margin-top: 20px;
    }

    .line {
      width: 1px;
      margin: 0 5px;
      background: #e5ebfb;
    }

    .left-content {
      padding-right: 10px;
      width: calc(50% - 15px);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .right-content {
      position: absolute;
      top: 0;
      left: 350px;
      right: 0;
      bottom: 0;
      overflow-x: hidden;
      overflow-y: auto;

      .tle {
        height: 40px;
        line-height: 40px;
      }

      .check {
        width: 100%;
        display: flex;
        height: 30px;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #333;

        > i {
          font-size: 20px;
          cursor: pointer;
          color: #6881ec;
        }
      }
    }
  }

  .btns-top {
    margin: 20px 0;
    display: flex;
    align-items: center;

    .el-input {
      margin: 0 5px 0 10px;
    }

    .el-button {
      margin: 0 5px;
    }
  }

  .text-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    div {
      font-size: 14px;
      width: 240px;
      // height: 50px;
      margin: 5px;
      border-radius: 5px;
      border: 1px solid #ccc;
      padding: 10px;
      box-sizing: border-box;

      .content {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .l-active {
      border: 2px solid #6881ec;
    }
  }

  .img-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    div {
      width: 135px;
      position: relative;
      height: 135px;
      margin: 5px;
      border-radius: 5px;
      border: 1px solid #ccc;
      text-align: center;
      cursor: pointer;

      img {
        width: 135px;
        height: 135px;
        object-fit: cover;
        border-radius: 5px;
      }

      span.bgc {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 25px;
        line-height: 25px;
        color: #fff;
        font-size: 14px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.3);
        /*让长段文本不换行*/
        white-space: nowrap;
        /*设置文本超出元素宽度部分隐藏*/
        overflow-x: hidden;
        /*设置文本超出部分用省略号显示*/
        text-overflow: ellipsis;
      }
    }

    .l-active {
      border: 2px solid #6881ec;
    }
  }

  .load-more {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-dialog {
    /deep/.el-tree-node {
      position: relative;
    }

    .staff-name {
      position: absolute;
      left: 295px;
    }
  }

  .show-data {
    // height: 20px;
    line-height: 20px;
    display: flex;

    span {
      margin: 0 10px;
      max-width: 100px;
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      cursor: pointer;
    }

    i {
      cursor: pointer;
    }
  }

  .plus-wrap {
    width: 135px;
    height: 135px;
    text-align: center;
    line-height: 150px;
    cursor: pointer;
    border: 1px dashed #ccc;

    > img {
      width: 135px;
      height: 135px;
      object-fit: cover;
    }

    i {
      font-size: 20px;
      color: #999;
    }
  }

  .img-text {
    width: 400px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    border: 1px dashed #ccc;
    cursor: pointer;

    .success {
      color: rgb(126, 211, 33);
      font-size: 20px;
      vertical-align: middle;
    }

    span.desc {
      color: #333;
      font-size: 14px;
      margin: 0 15px 0 10px;
    }

    span.edit {
      color: #6881ec;
      vertical-align: middle;
    }
  }
}
</style>
<style lang="less">
.custom-span {
  display: inline-block;
  font-weight: bold;
  color: #fea96c;
  border-radius: 5px;
  background: #fff7e6;
  border: 1px solid #f5daa3;
  width: 80px;
  height: 32px;
  margin: 5px 0;
  line-height: 32px;
  text-align: center;
}

.avatar-uploader .el-upload {
  // border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  // border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.hide .el-upload--picture-card {
  display: none;
}

img {
  object-fit: cover !important;
}

.fiexd {
  position: absolute;
  top: 100px;
  left: 180px;
}
</style>
